/**
 * 编辑组件
 */

import React, { useState } from 'react';
import { Modal, Form, message, Input } from 'antd';

const Edit = ({ dispatch, editVisible, listItemInfo, onCancel, getList }) => {
  const [form] = Form.useForm();
  const [load, setLoad] = useState(false);

  const editSubmit = (value) => {
    setLoad(true);
    dispatch({
      type: 'demo/fetchEdit',
      payload: { ...value, id: listItemInfo.id },
      callback: (res) => {
        setLoad(false);
        if (res && (res.msg || res.code)) {
          return;
        }
        message.success('编辑成功！');
        onCancel();
        getList();
      },
    });
  };

  return (
    <Modal
      destroyOnClose
      visible={editVisible}
      title="编辑"
      okText="保存"
      cancelText="取消"
      maskClosable={false}
      confirmLoading={load}
      onCancel={() => onCancel()}
      onOk={() => {
        form
          .validateFields()
          .then((values) => editSubmit(values))
          .catch((info) => {
            console.log(info);
          });
      }}
      bodyStyle={{
        width: '500px',
        height: '200px',
        overflow: 'auto',
      }}
      style={{
        minWidth: '500px',
      }}
    >
      <Form form={form} preserve={false} name="addFrom" initialValues={listItemInfo}>
        <Form.Item name="userName" label="姓名">
          <Input maxLength={300} />
        </Form.Item>
        <Form.Item name="account" label="账号">
          <Input maxLength={300} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Edit;
